<template>11111
  <div class="pyramidTrend-container">
    <div class="chartsdom" id="chart_ptrend"></div>
  </div>
</template>

<script>
import { getalarmData } from '@/api/echarts'

export default {
  name: "pyramidTrend",
  data() {
    return {
      option: null,
      dataMap: {},
      alarmEquipmentNumber: [],
      faultEquipmentNumbers: [],
      offlineEquipmentNumbers: [],
      months: []
    }
  },
  created() {
    getalarmData().then(res => {
      this.alarmEquipmentNumber = res.msg.map(item => item.alarmEquipmentNumber);
      this.faultEquipmentNumbers = res.msg.map(item => item.faultEquipmentNumber);
      this.offlineEquipmentNumbers = res.msg.map(item => item.offlineEquipmentNumber);
      this.months = res.msg.map(item => `${item.month}月份`);
      this.getEchart();
    });
  },
  mounted() {
    window.addEventListener('resize', this.resizeChart);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeChart);
  },
  methods: {
    dataFormatter(obj) {
      let pList = ['数值报警设备数量', '故障报警设备数量', '离线报警设备数量'];
      let temp;

      for (let x = 0; x < 3; x++) {
        let max = 0;
        let sum = 0;
        temp = obj[x];
        for (let i = 0, l = temp.length; i < l; i++) {
          max = Math.max(max, temp[i]);
          sum += temp[i];
          obj[x][i] = { name: pList[x], value: temp[i] };
        }
        obj[x + 'max'] = Math.floor(max / 100) * 100;
        obj[x + 'sum'] = sum;
      }

      return obj;
    },

    getEchart() {
      let myChart = echarts.init(document.getElementById('chart_ptrend'));
      let itemStyle = {
        barBorderRadius: [15, 0],
        color: '#ffe000'
      }

      this.dataMap.dataType = this.dataFormatter({
        2: [this.offlineEquipmentNumbers[0], this.faultEquipmentNumbers[0], this.alarmEquipmentNumber[0]],
        1: [this.offlineEquipmentNumbers[1], this.faultEquipmentNumbers[1], this.alarmEquipmentNumber[1]],
        0: [this.offlineEquipmentNumbers[2], this.faultEquipmentNumbers[2], this.alarmEquipmentNumber[2]],
      });

      this.option = {
        baseOption: {
          timeline: {
            axisType: 'category',
            autoPlay: true,
            playInterval: 2000,
            data: this.months,
            left: 80,
            right: 80,
            bottom: -5,
            lineStyle: { color: '#179bf1' },
            label: { color: '#fff' },
            checkpointStyle: {
              color: '#01d8ff',
              symbolSize: 10,
              borderColor: 'rgba(1, 216, 255, 0.5)',
              borderWidth: 5,
            },
            controlStyle: { show: false },
            itemStyle: {
              borderColor: '#004b85',
              borderWidth: 1,
              shadowColor: 'rgba(1, 216, 225, 0.5)',
              shadowBlur: 5
            },
            emphasis: {
              label: {
                color: '#01d8ff',
                show: false
              },
              checkpointStyle: {
                color: '#01d8ff',
                borderColor: 'rgba(1, 216, 255, 0.5)',
                borderWidth: 5,
              },
              itemStyle: {
                color: '#01d8ff',
                borderColor: 'rgba(1, 216, 225, 0.5)',
                borderWidth: 5
              }
            }
          },
          calculable: true,
          grid: {
            top: '10%',
            bottom: '25%'
          },
          xAxis: [{
            type: 'category',
            axisLabel: { interval: 0 },
            data: ['数值报警设备数量', '故障报警设备数量', '离线报警设备数量'],
            splitLine: { show: false },
            axisTick: { show: false },
            axisLine: {
              show: true,
              lineStyle: { color: '#ffffff' },
            },
          }],
          yAxis: [{
            type: 'value',
            name: '个',
            splitLine: { show: false },
            axisTick: { show: false },
            axisLine: {
              show: true,
              lineStyle: { color: '#ffffff' }
            }
          }],
          series: [{
            name: '一类',
            type: 'bar',
            barWidth: 30,
            legendHoverLink: true,
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            },
          }]
        },
        options: [{
          series: [{
            data: this.dataMap.dataType['0'],
            itemStyle: itemStyle
          }]
        }, {
          series: [{
            data: this.dataMap.dataType['1'],
            itemStyle: itemStyle
          }]
        }, {
          series: [{
            data: this.dataMap.dataType['2'],
            itemStyle: itemStyle
          }]
        }]
      };

      myChart.setOption(this.option, true);
    },

    resizeChart() {
      let myChart = echarts.init(document.getElementById('chart_ptrend'));
      myChart.resize();
    }
  }
};
</script>

<style lang="scss" scoped>
.pyramidTrend-container {
  transform: scale(0.9);
  width: 100%;
  height: 3.7rem;
  margin-top: 0.38rem;

  .chartsdom {
    width: 100%;
    height: 3.6rem;
  }
}
</style>
